const id = location.search.split("=")[1];
// 后端完成（真实）
// 后端提供根据商品id查询单条商品数据的结构

// 根据id请求后端，获取商品详情信息
$.ajax({
    url: "http://localhost:3000/api",
    data: {
        type: "detail",
        id: id
    },
    success: res => {
        // 解析并查看数据
        console.log(res);

        // 开始渲染指定的页面结构

        // 图片的渲染
        $(".middleFrame").children("img")[0].src = res.img;
        $(".largeFrame").children("img")[0].src = res.img;

        // 标题渲染
        $(".goods-middle").find("h3").html(res.proName);
        $("#goods-price").html((res.price * res.discount / 10).toFixed(1));
        $("#goods-stock").html(res.stock);
        $("#goods-sales").html(res.sales);
        $("#goods-brand").html(res.brand);


    },
    dataType: "json"
})


// 绑定事件

// 跳转
$("#goCart").click(function(){
    $(location).attr("href", "./cart.html") 
})

// 加入购物车
$("#addToCart").click(function () {
    // const id = $(this).parent().attr("index");
    // 根据DOM结构获取价格
    const price = $("#goods-price").html() - 0;
    const number = $("#numberBar").val() - 0;
    // 4. 将点击的商品数据信息存储到本地存储：id，数量，选中状态，价格
    setLocal(id, price ,number);
    alert("已加入购物车")
})

function setLocal (id, price ,number){
    // 先读，判断是否是第一次存
    const goodsStr = localStorage.getItem("goods");
    const goods = goodsStr ? JSON.parse(goodsStr) : [];
    // 判断是否是重复商品
    let i = 0;
    const flag = goods.some((val,idx)=>{
        i = idx;
        return val.id === id;
    })
    if(flag){
        goods[i].num += number;
    }else{
        // 不是，增加商品信息：push
        goods.push({
            id,
            num:number,
            check:0,
            price
        })
    }
    // 将数据存储到本地存储
    localStorage.setItem("goods", JSON.stringify(goods));
}

// 读取用户的登录状态
const userMsg = localStorage.getItem("userMsg") ? JSON.parse(localStorage.getItem("userMsg")) : {};

// 判断用户登录状态，决定显示不同的信息
if (userMsg.state === "OK") {
    $(".goLogin").hide();
    $(".quit").show();
    $(".user-name").show().html(userMsg.username + " ");
    $(".user-pic").find("img").attr("src", "./images/v2-abed1a8c04700ba7d72b45195223e0ff_xl.jpg");
} else {
    $(".goLogin").show();
    $(".quit").hide();
    $(".user-name").hide();
    $(".user-pic").find("img").attr("src", "");
}

// 退出功能
$(".quit").click(function () {
    localStorage.setItem("userMsg", "{}");
    location.reload();
})
// 跳转至搜索页
$("#search-btn1").on("click", function () {
    let str = $("#search-bar").val();
    if (str !== "") {
        str = "./searchList.html?proName=" + str;
        $(location).attr("href",str);
    }
});


// 按钮级的登录守卫
$(".goCart").click(function () {
    if (userMsg.state !== "OK") {
        alert("请先登录")
        return false;
    }
})
